<template>
  <view class="content">
    <view class="close" :style="{ paddingTop: statusBarHeight + 'px' }">
      <up-icon name="close" color="#fff" size="24" @click="back"></up-icon>
    </view>
    <view class="form">
      <view class="code"> 输入短信验证码 </view>
      <view class="phone">已发送验证码到 {{ phoneNumber_encrypt }}</view>
      <view class="box">
        <up-code-input
          @change="change"
          mode="line"
          maxlength="4"
          color="#fff"
          size="60"
          space="30"
          fontSize="28"
          borderColor="#5BD465"
          hairline
        >
        </up-code-input>
      </view>
      <u-code
        unique-key="C"
        class="again"
        ref="uCodeRef"
        @change="codeChange"
        start-text="重新发送"
      >
      </u-code>
      <text @tap="getCode" :text="tips" class="again">{{ tips }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { onLoad, onReady } from "@dcloudio/uni-app";
import { loginApi, getCodeApi } from "@/API/login/login.js";
const statusBarHeight = getApp().globalData.statusBarHeight;

onLoad((option) => {
  // console.log(option.phoneNumber)
  phoneNumber.value = option.phoneNumber;
  phoneNumber_encrypt.value = option.phoneNumber.replace(
    /(\d{3})\d{4}(\d{4})/,
    "$1****$2"
  );
});
onReady(() => {
  uCodeRef.value.start();
});
const phoneNumber = ref("");
const phoneNumber_encrypt = ref("");
const tips = ref("");
const uCodeRef = ref(null);
const codeChange = async (text) => {
  tips.value = text;
};
const change = async (e) => {
  if (e.length == 4) {
    let params = {
      loginType: 3, //1:微信登录，2:账号密码登录，3:手机号登录
      phoneNumber: phoneNumber.value,
      verificationCode: e,
    };
    let rst = await loginApi(params);
    if (rst.data.code == 0) {
      let token = rst.data.data.token;
      uni.setStorageSync("ACCESS_TOKEN", token);
      uni.setStorageSync("userInfo", rst.data.data);
      uni.showToast({
        title: "登录成功",
        icon: "success",
        duration: 1000,
      });
      //跳转到用户信息编辑页
      if (rst.data.data.setFinish == 1) {
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/home/index/index",
          });
        }, 1000);
      } else {
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/login/editInfo",
          });
        }, 1000);
      }
    } else {
      uni.showToast({
        title: rst.data.msg,
        icon: "none",
        duration: 1000,
      });
    }
  }
};
// 发送验证码
const getCode = () => {
  if (uCodeRef.value.canGetCode) {
    uni.showLoading({
      title: "正在获取验证码",
    });
    setTimeout(async () => {
      uni.hideLoading();
      let res = await getCodeApi({
        phoneNumber: phoneNumber.value,
        smsType: 2, //1:注册，2:登录，3:修改密码
      });
      if (res.data.code == 0) {
        // 这里此提示会被start()方法中的提示覆盖
        uni.showToast({
          title: res.data.msg,
          icon: "success",
          duration: 1000,
        });
        // 通知验证码组件内部开始倒计时
        uCodeRef.value.start();
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "success",
          duration: 1000,
        });
      }
    }, 2000);
  } else {
    uni.showToast({
      title: "倒计时结束后再发送",
      icon: "error",
      duration: 1000,
    });
  }
};
const back = () => {
  uni.navigateBack({
    delta: 1,
  });
};
</script>

<style lang="less">
page {
  background: url("http://112.124.50.179:8888/imgs/login/bg.png") no-repeat;
  background-size: cover;
  background-position: 100%;
}

.close {
  padding: 32rpx 0;
}

.form {
  padding: 120rpx 48rpx 0 48rpx;

  .code {
    font-size: 56rpx;
    color: #fff;
  }

  .phone {
    padding-top: 16rpx;
    color: #fff;
  }

  .box {
    padding-top: 64rpx;
  }

  .again {
    color: #4489fd;
    position: relative;
    top: 48rpx;
    // padding-top: 48rpx;
    font-size: 24rpx;
  }
}
</style>
